<template>
  <div>
    <el-card class="box-card">
      <el-table style="margin-top: 10px" border :data="ArticleArr">
        <el-table-column
          label="序号"
          width="60px"
          align="center"
          type="index"
        ></el-table-column>
        <el-table-column label="标题" width="150px" align="center">
          <template #="{ row, $index }">
            <pre>{{ row.title }}</pre>
          </template>
        </el-table-column>
        <el-table-column label="封面图片" width="150px" align="center">
          <template #="{ row, $index }">
            <img
              :src="row.cover_image"
              alt="图片加载失败"
              style="max-width: 100px; max-height: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column label="作者" align="center">
          <template #="{ row, $index }">
            <pre>{{ row.author }}</pre>
          </template>
        </el-table-column>
        <el-table-column
          label="分类"
          show-overflow-tooltip="true"
          align="center"
        >
          <template #="{ row, $index }">
            <el-tag>{{ getCategoryName(row.category) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="标签" min-width="150px" align="center">
          <template #="{ row, $index }">
            <el-tag v-for="tagId in row.tags" :key="tagId" style="margin: 5px">
              {{ getTagName(tagId) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="热度" align="center">
          <template #="{ row, $index }">
            <el-tag :type="getHeatTagType(row.heat)">{{ row.heat }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #="{ row, $index }">
            <el-tag :type="getStatusTagType(row.status)">
              {{ getStatusLabel(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" width="150px" align="center">
          <template #="{ row, $index }">
            <pre>{{ row.publish_time }}</pre>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" width="150px" align="center">
          <template #="{ row, $index }">
            <pre>{{ row.update_time }}</pre>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="150px"
          align="center"
        >
          <template #="{ row, $index }">
            <el-button
              type="warning"
              size="default"
              icon="Edit"
              @click="editArticle(row.id)"
            ></el-button>
            <el-popconfirm
              :title="`您确定要删除 ${row.title} 吗?`"
              width="200px"
              icon="Delete"
              @confirm="removeArticle(row.id)"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="default"
                  icon="Delete"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { reqHasArticle, reqDeleteArticle } from '@/api/article'
import type { Article, ArticleResponseData } from '@/api/article/type.ts'
import { TagRecords } from '@/api/tag/type.ts'
import { Category } from '@/api/category/type.ts'
import { reqHasCategory } from '@/api/category'
import { reqHasTag } from '@/api/tag'
import { ElMessage } from 'element-plus'
import router from '@/router'

let ArticleArr = ref<Article[]>([])

//存储获取的分类数组
const categoryData = reactive<Category[]>([])
//存储获取的标签数组
const tagData = reactive<TagRecords>([])
//表示状态的数组
const statusOptions = [
  { value: '0', label: '正常', type: 'success' },
  { value: '1', label: '置顶', type: 'danger' },
  { value: '2', label: '隐藏', type: 'info' },
]

// 获取分类名称
const getCategoryName = (categoryId: number | string) => {
  const category = categoryData.find((item) => item.id === categoryId)
  return category ? category.name : '未知分类'
}

// 获取标签名称
const getTagName = (tagId: number) => {
  const tag = tagData.find((item) => item.id === tagId)
  return tag ? tag.name : '未知标签'
}

// 获取热度标签类型
const getHeatTagType = (heat: number | string) => {
  const heatValue = Number(heat)
  if (heatValue >= 100) {
    return 'danger'
  } else if (heatValue >= 50) {
    return 'warning'
  } else {
    return 'success'
  }
}

// 获取状态标签类型
const getStatusTagType = (statusId: number | string) => {
  const status = statusOptions.find(
    (item) => item.value === statusId.toString(),
  )
  return status ? status.type : 'info'
}

// 获取状态标签
const getStatusLabel = (statusId: number | string) => {
  const status = statusOptions.find(
    (item) => item.value === statusId.toString(),
  )
  return status ? status.label : '未知状态'
}

//获取已有分类的接口封装为一个函数，在任何情况下获取数据，调用此函数即可
const getHasArticle = async () => {
  let result: ArticleResponseData = await reqHasArticle()
  if (result.code == 200) {
    ArticleArr.value = result.data
  }
  console.log(result)
}
//组件挂载完毕钩子———发送一次请求，获取已有分类数据
onMounted(async () => {
  await getHasArticle()
  const response = await reqHasCategory()
  if (response.code == 200) {
    // 将返回的 data 赋值给 categoryData
    categoryData.splice(0, categoryData.length, ...response.data)
  } else {
    console.log('获取分类信息失败', response.message)
  }
  const resTag = await reqHasTag()
  if (resTag.code == 200) {
    // 将返回的data赋值给tagData
    Object.assign(tagData, resTag.data)
  } else {
    console.log('获取标签信息失败', resTag.message)
  }
})

// 定义编辑文章的方法
const editArticle = (articleId: any) => {
  router.push({
    name: 'editArticle',
    params: {
      id: articleId,
    },
  })
}

// 气泡确认框确定按钮的回调
const removeArticle = async (id: number) => {
  let result: any = await reqDeleteArticle(id)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '文章删除成功',
    })
    // 删除成功之后立马再次获取已有文章数据
    await getHasArticle()
  } else {
    ElMessage({
      type: 'error',
      message: '删除文章失败',
    })
  }
}
</script>

<style scoped lang="scss"></style>
